<template>
  <div>   
      <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" fullscreen>
    <div class="fd-nav">
      <div class="fd-nav-left">
        <div class="fd-nav-back" @click="cancel">
          <i class="anticon anticon-left"></i>
        </div>
        <div class="fd-nav-title">设计-{{ workFlowDef.name }}</div>
      </div>
      <div class="fd-nav-right">
        <button type="button" class="ant-btn button-publish" @click="saveSet">
          <span>发 布</span>
        </button>
      </div>
    </div>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
          <span>{{ nowVal }}%</span>
          <div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
        </div>
        <div class="box-scale" :style="`transform: scale(${ nowVal / 100});`">
          <nodeWrap :nodeConfig="nodeConfig" :flowPermission="flowPermission" />
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">
             <div >流程结束</div> 
            </div>
          </div>
        </div>
      </section>
    </div>
    <errorDialog v-model:visible="tipVisible" :list="tipList" />
    <promoterDrawer />
    <approverDrawer :directorMaxLevel="directorMaxLevel" />
    <copyerDrawer />
    <conditionDrawer />
      </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted,reactive } from "vue";
// import { useRoute } from 'vue-router'
// import { ElMessage } from 'element-plus'
// import { getWorkFlowData, setWorkFlowData } from './utils/api.js';
import { useStore } from './stores/index'
import errorDialog from "./dialog/errorDialog.vue";
import promoterDrawer from "./drawer/promoterDrawer.vue";
import approverDrawer from "./drawer/approverDrawer.vue";
import copyerDrawer from "./drawer/copyerDrawer.vue";
import conditionDrawer from "./drawer/conditionDrawer.vue";
import { getAPI } from '/@/utils/axios-utils';
import { ApprovalFlowApi } from '/@/api-services/_approvalFlow/api';
// import { ApprovalFlowOutput, UpdateApprovalFlowInput } from '/@/api-services/_approvalFlow/models';

var props = defineProps({
	title: {
		type: String,
		default: '',
	},
});


let { setTableId, setIsTried } = useStore()
const emit = defineEmits(['reloadTable', 'updateFlow']);
let tipList = ref([]);
let tipVisible = ref(false);
let nowVal = ref(100);
let processConfig = ref({});
let nodeConfig = ref({});
let workFlowDef = ref({});
let flowPermission = ref([]);
let directorMaxLevel = ref(0);


const reErr = ({ childNode }) => {
  if (childNode) {
    let { type, error, nodeName, conditionNodes } = childNode;
    if (type == 1 || type == 2) {
      if (error) {
        tipList.value.push({
          name: nodeName,
          type: ["", "审核人", "抄送人"][type],
        });
      }
      reErr(childNode);
    } else if (type == 3) {
      reErr(childNode);
    } else if (type == 4) {
      reErr(childNode);
      for (var i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
          tipList.value.push({ name: conditionNodes[i].nodeName, type: "条件" });
        }
        reErr(conditionNodes[i]);
      }
    }
  } else {
    childNode = null;
  }
};
const saveSet = async () => { 

  setIsTried(true);
  tipList.value = [];
  reErr(nodeConfig.value);
  if (tipList.value.length != 0) {
    tipVisible.value = true;
    return;
  }
  processConfig.value.tableId = state.ruleSource.id;
  processConfig.value.workFlowDef.name = state.ruleSource.name;
  processConfig.value.flowPermission = flowPermission.value;
  state.ruleSource.flowJson = JSON.stringify(processConfig.value);
  await getAPI(ApprovalFlowApi).apiApprovalFlowUpdatePost(state.ruleSource);
	emit('updateFlow', processConfig.value);
	closeDialog();
};
const zoomSize = (type) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return;
    }
    nowVal.value -= 10;
  } else {
    if (nowVal.value == 300) {
      return;
    }
    nowVal.value += 10;
  }
};
const state = reactive({
	loading: false,
	isShowDialog: false,
	ruleSource: {} ,
	// nodeData: {},
	// graphData: {},
});

const openDialog = (row) => {
	state.ruleSource = row ;
	//初始化数据
	if (state.ruleSource.flowJson) {
      let data=JSON.parse(state.ruleSource.flowJson);
      // console.log(data.data);
      processConfig.value = data;
      nodeConfig.value = processConfig.value.nodeConfig;
      flowPermission.value = processConfig.value.flowPermission;
      directorMaxLevel.value = processConfig.value.directorMaxLevel;
      workFlowDef.value = processConfig.value.workFlowDef;

    setTableId(processConfig.value.tableId);
}else {
		 nodeConfig.value = {};
  flowPermission.value = {};
  // directorMaxLevel.value = 0;
  workFlowDef.value = {};
	}
  // console.log(workFlowDef.value);
  // console.log(processConfig.value);
  // console.log(nodeConfig.value);
  // console.log(flowPermission.value);
  // console.log(directorMaxLevel.value);
	state.isShowDialog = true;

};

const closeDialog = () => {
	emit('reloadTable');
	state.isShowDialog = false;
	// console.log('close');
};

const cancel = () => {
	state.isShowDialog = false;
	console.log('cancel');
};

defineExpose({ openDialog });
</script>
<style>
@import "./css/workflow.css";
.error-modal-list {
  width: 455px;
}
</style>